<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言板</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 99;
    }

    #zhoog {
      width: 100%;
      height: 100vh;
      z-index: 999;
    }

    #message {
      width: 200px;
      height: 60px;
      background: aqua;
      border: none;
      font-size: 30px;
    }

    #box {
      width: 500px;
      height: 450px;
      background: bisque;
      margin: auto;
      display: none;
      position: absolute;
      top: 120px;
      left: 550px;
      margin: auto;
      z-index: 9999;
    }

    table {
      /* border: 1px solid black; */
      border-collapse: collapse;
    }

    tr,
    th,
    td {
      width: 250px;
      height: 60px;
      border-bottom: 1px solid black;
      text-align: center;
    }

    .title {
      width: 460px;
      height: 60px;
      padding-left: 20px;
      line-height: 60px;
    }

    .title h2 {
      float: left;
      font-weight: normal;
    }

    #span_ {
      float: right;
      font-size: 30px;
      padding-right: 10px;
    }

    .nev {
      width: 460px;
      margin: auto;
      margin-top: 20px;
    }

    #biaoti,
    #ren {
      width: 460px;
      height: 40px;
      font-size: 22px;
    }

    #neirong {
      width: 462px;
      height: 67px;
    }

    .nev h4 {
      padding-bottom: 10px;
    }

    .nev #biaoti,
    #ren,
    #neirong {
      margin-bottom: 20px;
      font-size: 22px;
    }

    .anniu {
      width: 460px;
      margin: auto;
    }

    #publish,
    #shutDown {
      width: 50px;
      height: 30px;
      float: right;
      margin-top: 12px;
    }

    #publish {
      background: rgb(1, 119, 253);
      margin-left: 10px;
    }

    #shan {
      width: 200px;
      height: 40px;
    }
  </style>

  <body>
    <div id="zhoog">
      <button id="message">我要留言</button>
      <table>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>留言人</th>
          <th>内容</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
        <tbody id="tb"></tbody>
      </table>
    </div>

    <div id="box">
      <div class="title">
        <h2>发布留言</h2>
        <span id="span_">×</span>
      </div>
      <hr />
      <div class="nev">
        <h4>留言标题：</h4>
        <input type="text" id="biaoti" />
        <h4>留言人：</h4>
        <input type="text" id="ren" />
        <h4>留言内容：</h4>
        <textarea name="" id="neirong" cols="" rows=""></textarea>
      </div>
      <hr />
      <div class="anniu">
        <button id="publish">发布</button>
        <button id="shutDown">关闭</button>
      </div>
    </div>
  </body>
  <script>
    // 打开页面 可以看到留言列表
    // 点击留言按钮 弹出添加留言表单
    // 点击发布 ，显示发布成功， 1秒后关闭弹出， 显示最新留言列表
    // 点击删除 弹出二次确认弹框 确定即删除，取消则不删，删除成功提示然后显示最新的列表
    // 接口地址如下：
    // 获取留言列表：GET https://liu.zzgoodqc.cn/lyb
    // 发布留言接口：POST https://liu.zzgoodqc.cn/lyb/add
    // 发布留言需要的字段：
    // title、content、name
    // 删除接口地址：GET https://liu.zzgoodqc.cn/del/2
    // 2是该留言的id 获取列表时会返回id
    // 注意留言列表所有人都可以看到 ，不要操作别人的留言

    window.onload = function () {
      //页面渲染
      var xhttp = new XMLHttpRequest()
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          var dataObj = JSON.parse(xhttp.responseText)
          var sre = ''
          for (var i in dataObj.data) {
            sre += `<tr>
                                <td>${dataObj.data[i].id}</td>
                                <td>${dataObj.data[i].name}</td>
                                <td>${dataObj.data[i].title}</td>
                                <td>${dataObj.data[i].content}</td>
                                <td>${dataObj.data[i].updated_at}</td>
                                <td><button name ='del' id='shan'>删除</button></td>
                            </tr>`
            // tb.innerHTML = sre
          }
          document.getElementById('tb').innerHTML = sre
        }
      }
      xhttp.open('GET', 'https://liu.zzgoodqc.cn/lyb', true)
      xhttp.send()
      //显示
      document.getElementById('message').onclick = function () {
        document.getElementById('tb').style.display = 'none'
        /* var box =  */ document.getElementById('box').style.display = 'block'
        // box.style.display = 'block'
        document.getElementById('zhoog').style =
          'background:black;opacity: 0.4;'
      }
      //隐藏
      document.getElementById('shutDown').onclick = function () {
        document.getElementById('box').style.display = 'none'
        document.getElementById('zhoog').style = 'opacity: 1;'
        document.getElementById('tb').style.display = 'block'
        location.reload()
      }
      //×号关闭发布留言板
      document.getElementById('span_').onclick = function () {
        document.getElementById('box').style.display = 'none'
        document.getElementById('zhoog').style = 'opacity: 1;'
        document.getElementById('tb').style.display = 'block'
        location.reload()
      }
      //发布留言
      document.getElementById('publish').onclick = function () {
        var title = document.getElementById('biaoti').value,
          content = document.getElementById('ren').value,
          name = document.getElementById('neirong').value
        console.log(title)
        var xhttpObj = new XMLHttpRequest()
        xhttpObj.open('POST', 'https://liu.zzgoodqc.cn/lyb/add', true)
        xhttpObj.setRequestHeader(
          'Content-type',
          'application/x-www-form-urlencoded'
        )
        xhttpObj.send(`title=${content}&content=${name}&name=${title}`)
        // console.log(`title=${title}&content=${content}&name=${name}`);
        if (title == '' || content == '' || name == '') {
          alert('提交失败')
        } else {
          alert('提交成功')
          location.reload()
        }
      }

      //删除
      tb.onclick = function (e) {
        var data = '确定删除吗？'
        if (confirm(data == true)) {
          var ID = e.target.parentNode.parentNode.firstElementChild.innerHTML
          var this_tr = e.target.parentNode.parentNode
          tb.removeChild(this_tr)
          var xhr = new XMLHttpRequest()
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
              console.log(xhr)
              var res = JSON.parse(xhr.responseText)
              console.log(res)
            }
          }
          xhr.open('GET', `https://liu.zzgoodqc.cn/del/${ID}`, true)
          xhr.send()
        } else {
          return
        }
      }
    }
  </script>
</html>
